@import 'styles/variables'
@import 'styles/mixins'

$height-stepper: 95px

.order-page__hero
  background-image: url('/assets/station_background.jpg')
  background-size: cover

.steps__list
  position: relative
  z-index: 1

  display: flex
  max-width: 1490px
  margin-inline: auto

  &_wrapper
    overflow-x: hidden

.step__item
  position: relative
  background: #3E3C41
  display: flex
  align-items: center
  padding-block: 21px
  padding-inline: 15px
  flex: 1 1

  &:first-child
    &::before
      content: ''
      position: absolute
      top: 0
      bottom: 0
      left: -9999px
      right: 100%
      background: #FFA800

  &:last-child
    &::after
      content: ''
      position: absolute
      top: 0
      bottom: 0
      left: 100%
      right: -9999px
      background: #3E3C41

    &.step__item_colored
      &::after
        background: #FFA800

  &:not(:first-child)::before, &:not(:last-child)::after
    content: ''
    position: absolute

    border-block: calc(98px / 2) solid
    border-left: 37px solid transparent

  &:not(:last-child)
    &::after
      right: 0
      border-block-color: #E5E5E5
      border-right: 2px solid #E5E5E5

  &:not(:first-child)
    padding-left: 30px

    &::before
      right: 100%
      border-block-color: #3E3C41

  &.step__item_colored
    background: #FFA800

    &::before
      border-block-color: #FFA800

.steps__item_number
  font-weight: 700
  font-size: 36px
  line-height: 42px
  text-align: center
  text-transform: uppercase
  color: #fff
  border: 3px solid #FFFFFF
  border-radius: 50%
  width: 56px
  height: 56px
  display: flex
  justify-content: center
  align-items: center
  margin-right: 20px

.steps__item_label
  font-weight: 700
  font-size: 30px
  line-height: 35px
  color: #FFFFFF

.order-page__content
  display: flex
  justify-content: space-between
  gap: 30px

  max-width: 1360px
  width: 100%
  margin: 0 auto
  margin-bottom: 50px
  padding-top: 95px

  @include section-width

  &_wrapper
    background: #F7F5F9

.order-page__aside
  width: 360px
  flex-shrink: 0

.order-page__main
  flex: 1
  max-width: 960px
  margin-bottom: 120px

.last-tickets__header
  text-transform: uppercase
  margin-bottom: 30px

.last-tickets__item
  background: #FFFFFF
  border: 1px solid #C4C4C4
  box-shadow: 0px 2px 2px rgba(62, 60, 65, 0.25)
  margin-bottom: 15px
  padding: 20px 20px 15px

.last-ticket
  &__stations
    display: flex
    justify-content: space-between
    margin-bottom: 30px

  &__station
    &_to
      text-align: right
      width: 40%

    &_city
      font-size: 20px
      color: #292929
      margin-bottom: 5px
      text-transform: capitalize

    &_name
      font-size: 16px
      line-height: 19px
      color: #928F94

  &__info
    display: flex
    justify-content: space-between
    align-items: baseline

  &__icons
    display: flex

  &__price
    font-size: 36px

    &_from
      font-size: 16px
      font-weight: 400
      line-height: 19px
      color: #928F94
      margin-right: 5px

    &_amount
      margin-right: 5px
      font-weight: 700
      color: #FFA800

    &_currency
      font-weight: 400
      color: #928F94

.step-buttons__container
  display: flex
  margin-top: 100px

.button__prev-step, .button__next-step
  display: block
  max-width: 320px

  text-transform: uppercase

.button__prev-step
  margin-right: auto

.button__next-step
  margin-left: auto

.search-loader
  &__container
    min-height: 300px
    padding-block: 10% 20%

    background-image: url('/assets/search-loader.gif')
    background-repeat: no-repeat
    background-position: center
    background-color: #3E3C41
  &__text
    font-weight: 700
    font-size: 1.5rem
    text-align: center
    text-transform: uppercase

    color: #928F94
